昨天提到縮短頁面準備時間可以加快載入速度，今天紀錄一個簡單的辦法，延遲載入圖片。
簡單來說，就是讓還沒用到的圖片先等等，等到快需要用到時再加載，以減少初始頁面的加載時間。

要實現這個效果有兩種方式可以做到，第一是利用原生HTML5提供的屬性。

<img src=" " loading="lazy">

第二是利用jQuery，把需要延遲加載的圖片加上class。

<img data-src=" " class="lazy"> 

<script>
  $( ".lazy" ).lazyload(); 
</script>

相較來說，使用jQuery可以比原生HTML5做更多設定，像是提前一段距離開始載入，又或是進入頁面後等待一段時間再開始。
但為了避免有些瀏覽器不支援JavaScript，使用的時候可以把兩種都加上以防萬一。

不過就像昨天提到的，因為影響載入時間的原因很多，可能會因為一些資源阻塞讓整個讀取時間拉長，所以有時候僅僅延遲圖片的加載，可能對縮短初始畫面的載入時間影響很有限。

參考資料/延伸閱讀

1. MDN-Lazy_loading
2. web.dev